ul {
    margin: 100px;

    li {
        position       : relative;
        width          : 120px;
        height         : 35px;
        list-style     : none;
        perspective    : 500px;
    }
}

.box {
    width          : 100%;
    height         : 100%;
    transition     : all .3s;
    transform-style: preserve-3d;

    &:hover {
        transform: rotateX(90deg);
    }
}

.front,
.bottom {
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 100%;
    height  : 100%;
}

.front {
    background-color: pink;
    z-index         : 1;
    transform       : translateZ(17.5px);
}

.bottom {
    background-color: skyblue;
    // 如果有移动或者其他样式，必须先移动
    transform       : translateY(50%) rotateX(-90deg);
}